// src\components\List\index.jsx
import React, { Component } from 'react'
import './index.css'
import PubSub from 'pubsub-js'
export default class List extends Component {
    // state初始化一个userList
    state = {
        userList: [],
        isFirst: true,//是否第一次使用
        isLoading: false,//是否加载
        err: '',//错误信息
    }
    componentDidMount(){
        // 开启订阅
        this.token=PubSub.subscribe('mySearch',(_,stateObj)=>{
            this.setState(stateObj);
        })
        console.log("this.token--",this.token);
    }
    componentWillUnmount(){
        PubSub.unsubscribe(this.token);//取消订阅
    }

    render() {
        const { userList, isFirst, isLoading, err } = this.state;
        return (
            <div>
                <div className="row">
                    {
                        isFirst ? <div>欢迎使用，请输入用户登录名开始查询</div> :
                            err ? <div style={{ color: 'red' }}>{err}</div> :
                                isLoading ? <div>正在加载....</div> :

                                    userList.map(user => {
                                        return (
                                            <div key={user.id} className="card">
                                                <a href={user.html_url} target="_blank">
                                                    <img src={user.avatar_url} style={{ width: '100px' }} />
                                                </a>
                                                <p className="card-text">{user.login}</p>
                                            </div>
                                        )
                                    })
                    }



                </div>
            </div>
        )
    }
}
